<template>
  <n-card  hoverable class="user-comment" v-for="(item,index) in showList" :key="index">
    <n-collapse>
      <template #arrow>&nbsp;</template>
      <n-collapse-item>
        <template #header>
          <div class="user-comment-video">
            <img class="user-comment-video-img" :src="store.state.baseURL+item.img"></img>
            <div class="user-comment-video-about">
              <div class="user-comment-video-about-left">
                <div class="user-comment-video-about-title">{{ item.title }}</div>
                <div class="user-comment-video-about-score" v-if="item.score">
                  <n-rate readonly size="small" :value="Number(item.score)/2" :allow-half="true" />
                  <span class="score_text">{{ item.score }}</span>
                </div>
                <div class="user-comment-video-about-score" v-else>尚未评分</div>
              </div>
            </div>
          </div>
        </template>
        <template #header-extra>
          <div class="user-comment-video-about-right">
            <div class="user-comment-video-about-count">共{{ item.userComment.length }}条评论</div>
            <div class="user-comment-video-goto" @click="goto(item.id)">跳转>></div>
          </div>
         
        </template>
        <template #default>
          <n-divider style="margin:10px 0" />
          <div class="user-comment-content">
            <div class="user-comment-content-one" v-for="item in item.userComment" >
              <n-ellipsis expand-trigger="click" line-clamp="3" :tooltip="false">
                <div class="user-comment-content-one-content">{{ item.content }}</div>
              </n-ellipsis>
              <div class="user-comment-content-one-bottom">
                <div class="user-comment-content-one-time">{{ takeTime(item.time) }}</div>
                <div size="small" class="user-comment-content-one-like" >
                  <div class="iconfont" >&#xe8ad;</div>
                  <div>{{ item.likes_count }}</div>
                </div>
                <div size="small" class="user-comment-content-one-like" >
                  <div class="iconfont reverseY" >&#xe8ad;</div>
                  <div>{{ item.dislikes_count }}</div>
                </div>
              </div>
              <n-divider :dashed="true" style="margin:10px 0" />
            </div>
          </div>
        </template>
      </n-collapse-item>
    </n-collapse>
  </n-card>
</template>


<script setup>
import { NRate ,NDivider,NCard,NCollapse,NCollapseItem,NButton} from "naive-ui";
import { defineProps,ref, watch } from "vue";
import { useStore } from "vuex";
import {takeTime} from '@/utils/base'
import {useRouter} from 'vue-router'
const router = useRouter()
const store = useStore();
const props = defineProps({
  data:{
    type:Array,
    default:()=>[]
  }
})
const showList=ref([])
const takeData=()=>{
  let videos=new Map();
  for(let i in props.data){
    let videoBase={
      id:props.data[i].video.id,
      img:props.data[i].video.img,
      title:props.data[i].video.title,
      score:props.data[i].user_score,
      userComment:[]
    }
    videos.set(videoBase.id,videoBase)
  }
  for(let i in props.data){
    if(videos.has(props.data[i].video.id)){
      let commentBase={
        id:props.data[i].id,
        content:props.data[i].content,
        time:props.data[i].time,
        likes_count:props.data[i].likes_count,
        dislikes_count:props.data[i].dislikes_count
      }
      videos.get(props.data[i].video.id).userComment.push(commentBase)
    }
  }
  showList.value=Array.from(videos.values())
  console.log(showList.value)
}
watch(()=>props.data,()=>{
  takeData()
},{deep:true,immediate:true})
const goto=(id)=>{
  router.push(`/detail/${id}`)
}
</script>
<style lang="scss" scoped>
@import '@/styles/base.scss';
.user-comment{
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
  padding: 10px;
  .user-comment-video-about-right{
    display: flex;
    align-items: center;
    gap: 10px;
    .user-comment-video-goto{
      font-weight: bold;
      &:hover{
        color: $baseColor;
      }
    }
  }
  
  .user-comment-video{
    display: flex;
    align-items: center;
    .user-comment-video-img{
      width: 80px;
      border-radius: 5px;
      margin-right: 10px;
    }
    .user-comment-video-about{
      display: flex;
      flex: 1;
      align-items: baseline;
      justify-content: space-between;
      
      .user-comment-video-about-title{
        font-size: 1.5rem;
        font-weight: bold;
        color: #333;
      }
      .user-comment-video-about-score{
        font-size: 0.9rem;
        color: #999;
      }
      .user-comment-video-about-count{
        font-size: 0.9rem;
        color: #999;
      }
    }
  }
  .user-comment-content{
    padding: 10px;
    .user-comment-content-one{
      display: flex;
      flex-direction: column;
      padding: 10px;
      .user-comment-content-one-content{
        font-size: 1.2rem;
        color: #333;
      }
      .user-comment-content-one-bottom{
        display: flex;
        align-items: center;
        gap: 1rem;
        .user-comment-content-one-time{
          font-size: 0.9rem;
          color: #999;
        }
        .user-comment-content-one-like{
          display: flex;
          align-items: center;
          gap: 0.5rem;
          font-size: 0.9rem;
          color: #999;
        }
      }
      
    }
  }
}
</style>